import React, {Component} from 'react';
import {Card, Button, message, Form, Divider, InputNumber, Input} from 'antd';

import {reqGetAskIndex, reqUpdateAskIndex} from "../../api";
import {getReqData} from "../../utils";

const {Item} = Form;

class Ask extends Component {
    constructor(props) {
        super(props);

        this.state = {
            submitData: []
        };
    }

    onChangeCount = (value, name) => {
        let {submitData} = this.state;
        let flag = false;
        submitData.forEach(v => {
            if (v.name === name && value !== v.count) {
                v.count = value;
                flag = true;
            }
        });
        if (!flag) return null;
        this.setState({submitData});
    };

    onChangeUrl = (value, name) => {
        let {submitData} = this.state;
        let flag = false;
        submitData.forEach(v => {
            if (v.name === name && value !== v.url) {
                v.url = value;
                flag = true;
            }
        });
        if (!flag) return null;
        this.setState({submitData});
    };

    onChangeTel = (value, name) => {
        let {submitData} = this.state;
        let flag = false;
        submitData.forEach(v => {
            if (v.name === name && value !== v.telephone) {
                v.telephone = value;
                flag = true;
            }
        });
        if (!flag) return null;
        this.setState({submitData});
    };

    /**
     * 提交的回调函数
     */
    submit = async () => {
        const {data, submitData} = this.state;
        if (JSON.stringify(data) !== JSON.stringify(submitData)) return null;
        console.log('222222222222222222222');
        const result = await reqUpdateAskIndex(submitData);
        const tempData = getReqData(result);
        if (!tempData) message.error(result.data.data.msg);
        else message.success('更新成功');
    };

    async componentDidMount() {
        const result = await reqGetAskIndex();
        const data = getReqData(result);
        if (!data) {
            console.log(result);
            message.error(result.data.msg);
            return null;
        }
        this.setState({data, submitData: [...data]});
    };

    render() {
        const {data} = this.state;
        if (!data) return null;
        // 指定item布局的宽度比例
        const formItemLayout = {
            labelCol: {span: 2}, // 左侧label的宽度
            wrapperCol: {span: 10}, // 右侧的宽度
        };
        return (
            <Card title='装修咨询管理'>
                <Form {...formItemLayout}>

                    <Divider>{data[0].name}</Divider>
                    <Item label='服务人数'>
                        <InputNumber min={1} defaultValue={data[0].count} onChange={value => {
                            this.onChangeCount(value, data[0].name)
                        }}/>
                    </Item>
                    <Item label='咨询url'>
                        <Input placeholder={data[0].url} onChange={value => {
                            this.onChangeUrl(value, data[0].name)
                        }}/>
                    </Item>
                    <Item label='联系电话'>
                        <Input placeholder={data[0].telephone} onChange={value => {
                            this.onChangeTel(value, data[0].name)
                        }}/>
                    </Item>

                    <Divider>{data[1].name}</Divider>
                    <Item label='服务人数'>
                        <InputNumber min={1} defaultValue={data[1].count} onChange={value => {
                            this.onChangeCount(value, data[1].name)
                        }}/>
                    </Item>
                    <Item label='咨询url'>
                        <Input placeholder={data[1].url} onChange={value => {
                            this.onChangeUrl(value, data[1].name)
                        }}/>
                    </Item>
                    <Item label='联系电话'>
                        <Input placeholder={data[1].telephone} onChange={value => {
                            this.onChangeTel(value, data[1].name)
                        }}/>
                    </Item>

                    <Divider>{data[2].name}</Divider>
                    <Item label='服务人数'>
                        <InputNumber min={1} defaultValue={data[2].count} onChange={value => {
                            this.onChangeCount(value, data[2].name)
                        }}/>
                    </Item>
                    <Item label='咨询url'>
                        <Input placeholder={data[2].url} onChange={value => {
                            this.onChangeUrl(value, data[2].name)
                        }}/>
                    </Item>
                    <Item label='联系电话'>
                        <Input placeholder={data[2].telephone} onChange={value => {
                            this.onChangeTel(value, data[2].name)
                        }}/>
                    </Item>

                    <Divider>分割线</Divider>
                    <Item>
                        <Button type='primary' onClick={this.submit}>提交</Button>
                    </Item>
                </Form>
            </Card>
        );
    }
}

export default Ask;
